Estoy tratando de crear un formulario dinámico solo con html, css y JavaScript (o un poco de JQuery), así que mi problema es que tengo esto:
<div class="form-item"> <label for="form-container">Random Title:</label> <div id="form-container"> ***Here is where I add dynamic "forms"*** </div> <div> <button type="button" class="add-form" onclick="AddForm()">Add form</button> </div> </div>y el JavaScript es (no sé si es la mejor solución pero al menos funciona jaja):
function addForm(){ let container= document.getElementById('form-container'); if (cnt<5){ cnt+=1; container.innerHTML += `***the form but write on HTML format***`; } else { alert("¡you cant add anymore!"); } }y necesito algo similar pero para eliminar los formularios que agregué con el botón de agregar dinámico.
(el formulario está entre "" porque en realidad no es un formulario, es solo un div con entradas dentro, porque es parte de un formulario más grande con otras entradas en otros divs)
Por lo general , no es una buena idea usar controladores de eventos en línea ( <button onclick=... ).
Aquí hay un ejemplo reproducible mínimo donde el manejo delegado maneja la creación, el envío y la eliminación de un máximo de 5 formularios dinámicos dentro de div#form-container .
Zona de juegos para este código.
const maxForms = 5; document.addEventListener(`click`, handle); function createFormHTML(n) { if (n > maxForms) { return alert(`No more forms allowed`); } return ` <div data-dynamicform="${n}"> <input type="text" placeholder="type something!"> <button class="submit">Submbit</button> <button class="erase">Delete form</button> </div>`; } function handle(evt) { console.clear(); if (evt.target.classList.contains(`add-form`)) { const container = document.querySelector(`#form-container`); container.dataset.nforms = +container.dataset.nforms + 1; const newForm = createFormHTML(+container.dataset.nforms); return newForm && container .insertAdjacentHTML(`beforeend`, newForm) || true; } if( evt.target.classList.contains(`submit`)) { return console.log(`submitted form #${ evt.target.closest(`[data-dynamicform]`).dataset.dynamicform}`); } if (evt.target.classList.contains(`erase`)) { evt.target.closest(`[data-dynamicform]`).remove(); const dynamicForms = document.querySelectorAll(`[data-dynamicform]`); dynamicForms.length && dynamicForms .forEach( (form, i) => form.dataset.dynamicform = i + 1 ); document.querySelector(`#form-container`).dataset.nforms = dynamicForms.length; } } body { margin: 1rem; font: normal 12px/15px verdana,arial; } #form-container { padding: 4px; } #form-container [data-dynamicform] { margin-bottom: 4px; } <div class="form-item"> <div> <button type="button" class="add-form">Add form</button> </div> <div id="form-container" data-nforms="0"> <h4>Your forms</h4> </div> </div>